<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/dist/include-openlayers-local.js"></script>
  </head>
  <body>
    <button onclick="viewPoint()">显示点图层</button>
    <button onclick="hidePoint()">隐藏点图层</button>
    <div id="map"></div>
    <script>
      var gaodeMapLayer = new ol.layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false
        })
      })
      var pointLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
      })
      var map = new ol.Map({
        target: 'map',
        layers: [gaodeMapLayer],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [104.54969, 30.39209],
          zoom: 9
        })
      })
      map.addLayer(pointLayer)
      map.on('click', function (e) {
        let point = new ol.Feature({
          geometry: new ol.geom.Point([e.coordinate[0], e.coordinate[1]])
        })
        point.setStyle(
          new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                color: 'red'
              }),
              stroke: new ol.style.Stroke({
                color: 'blue',
                size: 1
              })
            })
          })
        )
        pointLayer.getSource().addFeature(point)
      })
      function viewPoint() {
        pointLayer.setVisible(true)
      }
      function hidePoint() {
        pointLayer.setVisible(false)
      }
      map.getView().on('change:resolution', function () {
        console.log(this.getResolution())
        console.log(this.getZoom())
      })
    </script>
  </body>
</html>
